<template>
	<div class="shopcart">
		<transition name='fade'>
			<div class="list-mask" v-show="listshow" @click="hideList"></div>
		</transition>

		<div class="content" @click="toggleList">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo" :class="{'hasShoping':totalCount>0}">
						<span class="icon-shopping_cart">购物车图标</span>
					</div>
					<div class="carCount" v-show="totalCount>0">{{totalCount}}</div>
				</div>
				<div class="price">￥{{totalPrice}}</div>
				<div class="desc">另需运送费￥{{deleveryPrice}}元</div>
			</div>
			<div class="content-right">
				<div @click.stop.prevent="pay" :class="{'enough':totalPrice>=minPrice}" class="paytip">
					{{payDesc}}
				</div>
				
			</div>
		</div>
		<!--<div class="ball-container">
			<transition-grop name='drop' tag="ul">
				<div v-for="(ball,index) in balls" v-show="ball.show" class="ball" :key="index"></div>
			</transition-grop>
		</div>-->
		<transition name='slide-fade'>
			<div class="shopcart-list" v-show="listshow">
				<div class="list-header clearfix">
					<h1 class="title">购物车</h1>
					<span class="empty" @click="empityFood">清空</span>
				</div>
				<div class="list-content" ref='listContainer'>
					<ul>
						<li class="food" v-for="food in selectFoods">
							<span class="name fl">{{food.name}}</span>
								
							<div class="price fr">
								<span>￥{{food.price*food.count}}</span>
							</div>
							<div class="catcontrol-wrapper">
								<v-cartcontrol :food='food'></v-cartcontrol>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</transition>
			
	</div>
</template>

<script>
	import cartcont from '../public/cartcontrol.vue'
	import BScroll from 'better-scroll'
	export default{
		props:{
		  	deleveryPrice:{
		  		type: Number
		  	},
		  	minPrice:{
		  		type: Number
		  	},
		  	selectFoods:{
		  		type: Array,
		  		default(){
		  			return [{
		  				price:10,
		  				count:1
		  			}]
		  		}
		  	}
		},
		components:{
			'v-cartcontrol':cartcont
		},
		data(){
			return{
				balls:[
					{
						show: false
					},
					{
						show: false
					},
					{
						show: false
					},
					{
						show: false
					},
					{
						show: false
					}
				],
				dropBalls:[
					
				],
				fold: true
			}
		},
		computed:{
			totalPrice(){
				let total = 0;
				this.selectFoods.forEach((food)=>{
					total += food.price*food.count
				})
				return total;
			},
			totalCount(){
				let count = 0;
				this.selectFoods.forEach((food)=>{
					count += food.count
				})
				return count;
			},
			payDesc(){
				if(this.totalPrice===0){
					return `￥${this.minPrice}元起送`
				}else if(this.totalPrice<this.minPrice){
					return `还差￥${this.minPrice-this.totalPrice}元起送`
				}else{
					return "去结算"
				}
			},
			listshow(){
				/*影响的是食物数量和是否折叠两个条件*/
				if(!this.totalCount){
					this.fold = true;
				}
				let show = !this.fold;
				if(show){
					this.$nextTick(()=>{
						if(!this.scroll){
							this.scroll = new BScroll(this.$refs.listContainer,{
								click: true
							});
						}else{
							this.scroll.refresh();
						}
					})
				}
				return show
			}
		},
		methods:{
			pay(){
				if(this.totalPrice < this.minPrice){
					return;
				}
				window.alert(`支付${this.totalPrice}元`)
			},
			/*drop(el){
				for(let i=0;i<this.balls.length;i++){
					let ball = this.balls[i];
					if(!ball.show){
						ball.show = true;
						ball.el = el;
						this.dropBalls.push(ball);
						return;
					}
				}
			},*/
			toggleList(){
				if(!this.totalCount){
					return;
				}
				this.fold = !this.fold;
				console.log(this.fold)
			},
			empityFood(){
				this.selectFoods.forEach(function(v){
					v.count = 0;
				})
			},
			hideList(){
				this.fold = true;
			}
		}
	}
</script>

<style lang="stylus">
	.list-mask{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(7,17,27,0.6);
		z-index: -1;
		filter:blur(10px);
	}
	.shopcart-list{
		position: absolute;
		z-index: -1;
		bottom: 48px;
		left: 0;
		width: 100%;
	}
	.list-header{
		height: 40px;
		line-height: 40px;
		padding: 0 18px;
		background: #f3f5f7;
		border-bottom: 1px solid rgba(7,17,27,0.1);
	}
	.list-header .title{
		float: left;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.list-header .empty{
		float: right;
		font-size: 12px;
		color: rgb(0,160,220);
	}
	.list-content{
		padding: 0 18px;
		max-height: 217px;
		background: #fff;
		overflow: hidden;
	}
	.list-content .food{
		border-bottom: 1px solid rgba(7,17,27,0.1);
		height: 48px;
		width: 100%;
		position: relative;
	}
	.list-content .food .catcontrol-wrapper{
		position: absolute;
		right: 10px;
		top: 12px;
	}
	.food .name{
		float: right;
		font-size: 14px;
		color: rgb(7,17,27);
		float: left;
		line-height: 48px;
	}
	.food .price{
		font-size: 14px;
		color: rgb(147,153,159);
		line-height: 48px;
		margin-right: 110px;
	}
	
	.slide-fade-enter-active, .fade-enter-active,{
	  transition: all .3s;
	}
	.slide-fade-leave-active,.fade-leave-active {
	  transition: all .3s;
	}
	.slide-fade-enter {
	  transform: translate3d(0,100%,0);
	}
	.slide-fade-leave-to {
	  transform: translate3d(0,100%,0);
	}
	.fade-enter {
		opacity: 1;
	}
	.fade-leave-to {
	  	opacity: 0;
	}
	.shopcart{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 48px;
		background: #141d27;
		.ball-container{
			position: fixed;
			left: 32px;
			bottom: 22px;
			z-index: 200;
			&.drop-transition{
				transition: all 0.4s;
				.inner{
					width: 16px;
					height: 16px;
					border-radius: 50%;
					background: rgb(0,160,220);
					transition: all 0.4s;
				}
			}
			.ball{
				position: fixed;
				left: 32px;
				bottom: 22px;
				z-index: 200;
				
				&.drop-transition{
					transition: all 0.4s;
					.inner{
						width: 16px;
						height: 16px;
						border-radius: 50%;
						background: rgb(0,160,220);
						transition: all 0.4s;
					}
				}
			}
		}
		.content{
			display: flex;
			background:#141d27;
			font-size: 0;
			.content-left{
				flex: 1;
				.logo-wrapper{
					display: inline-block;
					position: relative;
					top: -10px;
					margin: 0 8px;
					padding: 6px;
					width: 56px;
					height: 56px;
					box-sizing: border-box;
					vertical-align: top;
					border-radius: 50%;
					background: #131d26;
					.carCount{
						position: absolute;
						right: 0;
						top: 0;
						line-height: 16px;
						border-radius: 8px;
						background: #f01414;
						padding: 0 6px;
						color: #fff;
						font-size:9px ;
						font-weight: 700;
						box-shadow: 0 4px 8px 0 #000;
					}
					.logo{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						background: #2b343c;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						&.hasShoping{
							background: #00a0dc;
							.icon-shopping_cart{
								background-image: url(../../assets/shop_cart2.png);
							}
						}
						
						.icon-shopping_cart{
							display: inline-block;
							width: 20px;
							height: 20px;
							background: url(../../assets/shop_cart.png) no-repeat;
							background-size: contain;
						}
					}
				}
				.price{
					box-sizing: border-box;
					display: inline-block;
					vertical-align: top;
					margin-top: 12px;
					padding-right: 12px;
					line-height: 24px;
					font-size: 16px;
					font-weight: 700;
					border-right: 1px solid rgba(255,255,255,0.1);
					color: #919396;
				}
				.desc{
					display: inline-block;
					font-size: 12px;
					vertical-align: top;
					color: rgba(255,255,255,0.4);
					font-weight: 700;
					line-height: 24px;
					padding-left: 12px;
					margin-top: 12px;
				}
			}
			.content-right{
				flex: 0,0,105px;
				width: 105px;
				.pay,.paytip{
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 13px;
					color: rgba(255,255,255,0.4);
					background: #2b333b;
					&.enough{
						background: #00a0dc;
						color: #fff;
					}
				}
					
			}
		}
	}
</style>